<template>
  <div class="vpt-base-moniter-wrapper">
    <section class="vpt-base-content">
      <div class="vpt-content-header">
        <gridFilter
          :title="baseData.entityParameter.title"
          :vptGridStyle="vptGridStyle001"
        >
          <vptBaseTemplate1006
          :screenSize="screenSize"
            :listLeft="baseData.entityParameter.list1"
            :listRight="baseData.entityParameter.list2"
            height="1.32rem"
            :leftStyle="{ width: '1.5rem', padding: '0.1rem 0.12rem', marginRight: '0.5rem', }"
            :btnStyle="{ right: '0', top: '-0.2rem' }"
          >
             <!--  :leftStyle="{ width: '26.5%', padding: '0.1rem 0.12rem' }"-->
          </vptBaseTemplate1006>
        </gridFilter>
        <gridFilter
          :title="baseData.mainframes.title"
          :vptGridStyle="vptGridStyle002"
        >
          <vptBaseTemplate1007 :list="baseData.mainframes.list">
          </vptBaseTemplate1007>
        </gridFilter>
      </div>

      <div class="vpt-content-footer">
        <gridFilter
          :title="baseData.entityCPU.title"
          :vptGridStyle="vptGridStyle"
        >
          <vptBaseTemplate1005
            type="0"
            :entity="baseData.entityCPU"
            height="1.5rem"
            v-bind="pieProps"
            meanValueText="近三月平均"
            peakValueText="近三月峰值"
          ></vptBaseTemplate1005>
        </gridFilter>
        <gridFilter
          :title="baseData.entityMemory.title"
          :vptGridStyle="vptGridStyle"
        >
          <vptBaseTemplate1005
            type="0"
            :entity="baseData.entityMemory"
            height="1.5rem"
            v-bind="pieProps"
            meanValueText="近三月平均"
            peakValueText="近三月峰值"
          ></vptBaseTemplate1005>
        </gridFilter>
        <gridFilter
          :title="baseData.entitySpace.title"
          :vptGridStyle="vptGridStyle"
        >
          <vptBaseTemplate1005
            type="0"
            :entity="baseData.entitySpace"
            height="1.5rem"
            v-bind="pieProps"
          ></vptBaseTemplate1005>
        </gridFilter>
      </div>
    </section>
  </div>
</template>

<script setup>
import { computed } from "vue";
import gridFilter from "@/components/grid-filter/index.vue";
import vptBaseTemplate1005 from "@/components/vpt-base-template-1005/index.vue";
import vptBaseTemplate1006 from "@/components/vpt-base-template-1006/index.vue";
import vptBaseTemplate1007 from "@/components/vpt-base-template-1007/index.vue";
import { addThousandsSeparator } from "@/utils/formatter.js";

const props = defineProps({
  screenSize: {
    type: String,
    default: () => {
      return "largescreen";
    }
  },
  cpu_info: { type: Object, default: () => ({}) },
  disk_info: { type: Object, default: () => ({}) },
  stream_info: { type: Object, default: () => ({}) },
  deviceNum: { type: Object, default: () => ({}) },
  mem_info: { type: Object, default: () => ({}) },
  io_info: { type: Object, default: () => ({}) },
  btnStyle: {
    type: Object,
    default: () => ({
      // right: "0.60rem",
      bottom: "0",
      fontSize: "0.14rem",
      height: "0.22rem",
      lineHeight: "0.22rem",
      padding: "0 0.05rem",
    }),
  },
});

const vptGridStyle001 = {
  marginLeft: "0rem",
  marginRight: "0.16rem",
  marginBottom: "0",
  width: "66.7%",
  height: "100%",
  fontSize: "0.16rem",
  padding: "0.16rem",
};

const vptGridStyle002 = {
  marginLeft: "0rem",
  marginRight: "0.1rem",
  marginBottom: "0",
  width: "32.3%",
  height: "100%",
  fontSize: "0.16rem",
  padding: "0.16rem",
};

const vptGridStyle = {
  marginBottom: "0",
  width: "1.5rem",
  height: "100%",
  fontSize: "0.16rem",
  padding: "0.16rem 0.12rem 0.14rem",
};

const pieProps = {
  titleProps: {
    left: "60%",
    top: "-15%",
  },
  center: ["20%", "52%"],
  radius: ["50%", "90%"],
};

const baseData = computed(() => {
  return {
    entityParameter: {
      title: "国产设备情况",
      list1: [
        {
          label: "国产服务器",
          value: props.deviceNum.equipment_num,
          unit: "台",
        },
        {
          label: "存储量",
          value: props.deviceNum.capacity,
          unit: "TB",
        },
      ],
      list2: [
        {
          label: "CPU",
          value: props.deviceNum.cpu,
          unit: "",
        },
        // {
        //   label: "服务器",
        //   value: props.deviceNum.server,
        //   unit: "",
        // },
        {
          label: "数据库",
          value: props.deviceNum.database,
          unit: "",
        },
      ],
    },
    mainframes: {
      title: "主机",
      list: [
        {
          label: "裸金属",
          value: props.deviceNum.mac_num,
          unit: "台",
        },
        {
          label: "虚拟机",
          value: props.deviceNum.virtual_num,
          unit: "台",
        },
        {
          label: "微服务集群",
          value: props.deviceNum.jq_num,
          unit: "个",
        },
        {
          label: "容器节点",
          value: props.deviceNum.con_num,
          unit: "个",
        },
      ],
    },
    entityCPU: {
      title: "CPU",
      name: "总使用率",
      centerFontColor:
        props.cpu_info.cpu_usage >= 80
          ? "#f53f3f"
          : props.cpu_info.cpu_usage >= 50
          ? "#fabf01"
          : "#00B675",
      percentageValue: props.cpu_info.cpu_usage,
      percentageDrag: 100 - Number(props.cpu_info.cpu_usage || 0),
      usage_year: props.cpu_info.cpu_usage_year,
      usage_max: props.cpu_info.cpu_usage_max,
      //第一个颜色占用率
      percentageColor: [
        props.cpu_info.cpu_usage >= 80
          ? "#f53f3f"
          : props.cpu_info.cpu_usage >= 50
          ? "#fabf01"
          : "#00B675",
        "#1e3651",
      ],
      list: [
        {
          label: "总核数",
          value: addThousandsSeparator(props.cpu_info.vcpu_total),
          unit: "核",
        },
        {
          label: "占用核数",
          value: addThousandsSeparator(props.cpu_info.cpu_used),
          unit: "核",
        },
      ],
    },
    entityMemory: {
      title: "内存",
      name: "总使用率",
      centerFontColor:
        props.mem_info.memory_usage >= 80
          ? "#f53f3f"
          : props.mem_info.memory_usage >= 50
          ? "#fabf01"
          : "#00B675",

      percentageValue: props.mem_info.memory_usage,
      percentageDrag: 100 - Number(props.mem_info.memory_usage || 0),
      usage_year: props.mem_info.memory_usage_year,
      usage_max: props.mem_info.memory_usage_max,
      percentageColor: [
        props.mem_info.memory_usage >= 80
          ? "#f53f3f"
          : props.mem_info.memory_usage >= 50
          ? "#fabf01"
          : "#00B675",
        "#1e3651",
      ],
      list: [
        {
          label: "总内存",
          value: addThousandsSeparator(props.mem_info.memory_total),
          unit: "GB",
        },
        {
          label: "已使用",
          value: addThousandsSeparator(props.mem_info.memory_used),
          unit: "GB",
        },
      ],
    },
    entitySpace: {
      title: "储存资源",
      name: "总使用率",
      centerFontColor:
        props.disk_info.disk_used_percent >= 80
          ? "#f53f3f"
          : props.disk_info.disk_used_percent >= 50
          ? "#fabf01"
          : "#00B675",
      percentageValue: props.disk_info.disk_used_percent,
      percentageDrag: 100 - Number(props.disk_info.disk_used_percent || 0),
      usage_year: props.disk_info.disk_used_percent_year,
      usage_max: props.disk_info.disk_used_percent_max,
      percentageColor: [
        props.disk_info.disk_used_percent >= 80
          ? "#f53f3f"
          : props.disk_info.disk_used_percent >= 50
          ? "#fabf01"
          : "#00B675",
        "#1e3651",
      ],
      list: [
        {
          label: "存储容量",
          value: addThousandsSeparator(props.disk_info.disk_total),
          unit: "TB",
        },
        {
          label: "已使用",
          value: addThousandsSeparator(props.disk_info.disk_used),
          unit: "TB",
        },
      ],
    },
    entityDisk: {
      title: "磁盘 I/O",
      list: [
        {
          label: "R/s",
          value: addThousandsSeparator(props.io_info.io_read),
          unit: "KB/s",
        },
        {
          label: "W/s",
          value: addThousandsSeparator(props.io_info.io_write),
          unit: "KB/s",
        },
      ],
    },
    entityNetWork: {
      title: "网络流量",
      list: [
        {
          label: "下行",
          value: addThousandsSeparator(props.stream_info.down_stream),
          unit: "KB/s",
        },
        {
          label: "上行",
          value: addThousandsSeparator(props.stream_info.up_stream),
          unit: "KB/s",
        },
      ],
    },
    averageTime: {
      title: "平均响应时间",
      list: [
        {
          label: "下行",
          value: addThousandsSeparator(props.stream_info.down_stream),
          unit: "KB/s",
        },
        {
          label: "上行",
          value: addThousandsSeparator(props.stream_info.up_stream),
          unit: "KB/s",
        },
      ],
    },
  };
});
</script>
<style lang="less" scoped>
.vpt-base-moniter-wrapper {
  height: 100%;

  .vpt-base-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;

    .vpt-content-header {
      display: flex;
      width: 100%;
      height: 44.1%;

      :deep(.vpt-grid-filter) {
        display: flex;
        flex-direction: column;

        .vpt-base-tpl-1006 {
          display: flex;
          flex-direction: column;
          flex: 1;
          height: 0;

          .vpt-base-content {
            height: 100%;
          }

          .icon {
            width: 0.93rem;
            height: 0.93rem;
            top: 0;
            right: 0;
            left: auto;
          }

          .vpt-base-content-left {
            display: flex;
            flex-direction: column;
            margin-right: 0.2rem;
            padding: 0.24rem;
          }

          .vpt-base-content-right {
            flex: 1;
            display: flex;
            flex-wrap: wrap;

            .vpt-label-item {
              &:first-child {
                margin-bottom: 0.16rem;
              }
              &:not(:last-child) {
                width: calc(~"(100% - 0.2rem) / 2");
              }
            }
          }
        }

        .vpt-base-tpl-1007 {
          height: 100%;

          .vpt-base-content {
            height: 100%;
            flex-wrap: wrap;
            box-sizing: border-box;
          }

          .vpt-label-item {
            &:nth-child(2n) {
              margin-right: 0;
              width: calc(~"(100% - 0.2rem) / 2");
            }
            &:not(:last-child) {
              width: calc(~"(100% - 0.2rem) / 2");
            }
          }
        }

        .vpt-base-tpl-1007,
        .vpt-base-tpl-1006 {
          .vpt-label-item {
            .vpt-val {
              margin-top: 0.08rem;
            }
          }
        }

        .vpt-base-tpl-1007 {
          .vpt-label-item {
            .vpt-label {
              font-size: 0.14rem;
              line-height: 0.2rem;
            }

            .vpt-val,
            .vpt-unit {
              font-size: 0.18rem;
              line-height: 0.22rem;
              color: #fff;
            }
          }
        }
      }
    }

    .vpt-content-footer {
      width: 100%;
      height: 55.9%;
      display: flex;
      align-items: center;
      margin-top: 0.12rem;

      :deep(.vpt-grid-filter) {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 0;

        &:not(:last-child) {
          margin-right: 0.16rem;
        }

        .vpt-base-template {
          .vpt-base-tpml-item {
            font-size: 0.14rem;

            div {
              // text-align: left;
              line-height: 0.2rem;

              &:first-child {
                margin-bottom: 0.05rem;
              }
            }
          }
        }

        .vpt-availability {
          width: 100% !important;
          box-sizing: border-box;
          padding: 0.12rem !important;

          .vpt-availability-item {
            font-size: 0.14rem;

            &:first-child {
              margin-bottom: 0.08rem;
            }
          }
        }

        .vpt-chart {
          flex: 1;
        }
      }
    }

    :deep(.vpt-grid-filter) {
      box-sizing: border-box;

      .vpt-grid-filter-header {
        font-size: 0.16rem;
        line-height: 0.2rem;
      }
    }
  }
}
</style>